<template>
	<div class="myBox" :class="{hide:xFalg}">
		<span>
			<div @click="getNum($event)">{{num1}}</div>
			<div @click="getNum($event)">{{num2}}</div>
			<div @click="getNum($event)">{{num3}}</div>
		</span>
		<span>
			<div @click="getNum($event)">{{num4}}</div>
			<div @click="getNum($event)">{{num5}}</div>
			<div @click="getNum($event)">{{num6}}</div>
		</span>
		<span>
			<div @click="getNum($event)">{{num7}}</div>
			<div @click="getNum($event)">{{num8}}</div>
			<div @click="getNum($event)">{{num9}}</div>
		</span>
		<span>
			<div class="sure" @click="shuffle([1,2,3,4,5,6,7,8,9,0])">确定</div>
			<div @click="getNum($event)" style="border-bottom: 1px solid #d2d2d2;">{{num0}}</div>
			<div class="del" @click="deletPassword">删除</div>
		</span>
	</div>
</template>
<script>
	import { mapMutations, mapGetters } from 'vuex';
	//import {Toast} from "../../../utils/toast";
	//import MD5 from '../../../utils/md5_wxh.js';
	import axios from 'axios';
	export default {
		props: {

		},
		data() {
			return {
				falg:true,
				num1:1,
				num2:2,
				num3:3,
				num4:4,
				num5:5,
				num6:6,
				num7:7,
				num8:8,
				num9:9,
				num0:0,
				userPassword:[]
			}
		},
		computed: {
			zxPageHeight() {
				return window.screen.height;
			},
			zxPageWidth() {
				return window.screen.width;
			},
			xFalg(){
				return this.falg;
			},
			...mapGetters('zx', [

			])
		},
		methods: {
			...mapMutations('zx', [

			]),
			getNum(e){
				var  mydiv = e.target;
				this.getArr(mydiv).addClass('lp');
				var that = this;
				var time1 =  setTimeout(function(){
					that.getArr(mydiv).removeClass('lp');
					window.clearTimeout(time1);
				},200)
				
				if(this.userPassword.length < 6){
					this.userPassword.push(e.target.innerHTML);
				}
				
				
				console.log(e.target.innerHTML);
				console.log(this.userPassword);
			},
			deletPassword(){
				this.userPassword.splice(this.userPassword.length-1,1);
				console.log(this.userPassword);
			},
			shuffle(a) {
				var b = a.sort(function() {
				    return .5 - Math.random();
				})
				this.num1 = b[0];
				this.num2 = b[1];
				this.num3 = b[2];
				this.num4 = b[3];
				this.num5 = b[4];
				this.num6 = b[5];
				this.num7 = b[6];
				this.num8 = b[7];
				this.num9 = b[8];
				this.num0 = b[9];
			},
			getArr(doms){
				var arr = [];
				if(doms.length){
					for(let j = 0; j <  activeDiv.length; j++){
						arr.push(doms[j])
					}
				}else{
					arr.push(doms)
				}
				return arr;
			}
		},
		components: {

		},
		created() {
			Array.prototype.addClass = function (myclass){
				console.log(this,'mydiv')
				for(let i = 0; i < this.length;i++){
//						console.log(this[i]);
					let flag =this[i].className.indexOf(myclass);
					if(flag < 0){
						this[i].className += ' '+ myclass;
					}
				}
			}
			Array.prototype.removeClass = function (myclass){
				
				for(let i = 0; i < this.length;i++){
//						console.log(this[i]);
					let flag =this[i].className.indexOf(myclass);
					if(flag > 0){
//							console.log(123)
						var str = this[i].className.replace(myclass,'');
						this[i].className = str;
					}
				}
			}
		},
		beforeDestroy() {

		},
		watch: {

		}

	}
</script>

<style scoped="scoped">
	.myBox {
		transition: 0.3s ;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		transform: height 2s;
		background: #fff;
	}
	.hide{
		height: 0;
	}
	.myBox div {
		width: 33.3%;
		height: 2.5rem;
		text-align: center;
		line-height: 2.5rem;
		border-left: 1px solid #d2d2d2;
		border-top: 1px solid #d2d2d2;
		border-spacing: 0px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	
	.myBox span div:last-child {
		border-right: 1px solid #d2d2d2;
	}
	
	.myBox span {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.sure{
		border-left: 0;
		background: #F2F2F2;
	}
	.del{
		border-right: 0;
		background: #F2F2F2;
	}
	.lp{
		background: black;
		opacity: 0.3;
	}
</style>